<template>
    <div>
    <el-form inline class="demo-form-inline">
    <el-row >
        <el-col :span="5">
            <el-form-item label="sku_id">
                <el-input v-model="query.payload.skuId" placeholder="sku_id" />
            </el-form-item>
        </el-col>
        <el-col :span="5">
            <el-form-item label="仓库id">
                <el-input v-model="query.payload.wareId" placeholder="仓库id" />
            </el-form-item>
        </el-col>
        <el-col :span="5">
            <el-form-item label="库存数">
                <el-input v-model="query.payload.stock" placeholder="库存数" />
            </el-form-item>
        </el-col>
        <el-col :span="5">
            <el-form-item label="sku_name">
                <el-input v-model="query.payload.skuName" placeholder="sku_name" />
            </el-form-item>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="5">
            <el-form-item label="锁定库存">
                <el-input v-model="query.payload.stockLocked" placeholder="锁定库存" />
            </el-form-item>
        </el-col>
    </el-row>
    <el-row >
        <el-form-item label="创建时间">
            <el-date-picker
                    v-model="query.dateRange"
                    type="datetimerange"
                    range-separator="到"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
            />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" activity @click="queryWmsWareSku">查询</el-button>
            <el-button type="warning" activity @click="reset">重置</el-button>
            <!--<el-button type="success" @click="addWmsWareSku">新增</el-button>-->
        </el-form-item>
    </el-row>
    </el-form>
    <el-divider style="margin: 12px 0"/>
    <el-table ref="table" border v-loading="loading"  :data="data.tableData" header-cell-class-name="headerClass">
        <el-table-column align="center" type="index"  label="序号" width="100px" />
        <el-table-column align="center" prop="wareName" label="仓库名称" />
        <el-table-column align="center" prop="skuName" label="商品名称"  width="350px" />
        <el-table-column align="center" prop="stock" label="库存数" />
        <el-table-column align="center" prop="stockLocked" label="锁定库存" />
        <el-table-column align="center" prop="updateTime" label="更新时间" width="180px"  >
            <template #default="scope">
                {{moment(scope.row.updateTime).format("yyyy-MM-DD HH:mm:ss")}}
            </template>
        </el-table-column>
        <!--<el-table-column align="center" label="操作">-->
            <!--<template #default="scope">-->
                <!--<el-link title="修改" type="primary" @click="editWmsWareSku(scope.row.id)">-->
                    <!--<el-icon :size="20">-->
                        <!--<Edit />-->
                    <!--</el-icon>-->
                    <!--修改-->
                <!--</el-link>-->
                <!--&nbsp;-->
                <!--<el-popconfirm title="删除？" @confirm="deleteWmsWareSku(scope.row.id)"  @cancel="">-->
                    <!--<template #reference>-->
                        <!--<el-link type="danger" title="删除">-->
                            <!--<el-icon :size="20">-->
                                <!--<Delete />-->
                            <!--</el-icon>-->
                            <!--删除-->
                        <!--</el-link>-->
                    <!--</template>-->
                <!--</el-popconfirm>-->
            <!--</template>-->
        <!--</el-table-column>-->
</el-table>
<el-pagination
        style="display: flex;align-items:center;justify-content:center;"
        v-model:currentPage="query.currentPage"
        v-model:page-size="query.pageSize"
        :page-sizes="[10, 20, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="query.total"
        @size-change="queryWmsWareSku"
        @current-change="queryWmsWareSku"
/>
<ModWmsWareSku @close="modWmsWareSku.isOpen = false"  @reload="queryWmsWareSku"
              ref="modWmsWareSku"
              :openType="transData.openType"
              :id="transData.id" />
</div>
</template>

<script setup>
    import ModWmsWareSku from '@/views/mall/wms/components/ModWmsWareSku.vue'
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'
    import {ref, reactive, onMounted} from 'vue'
    import moment from 'moment'
    let transData = reactive({})
    let modWmsWareSku = ref(null)
    let data = reactive({
        modRole:false,
        tableData:[],
        openType:"",
        id:"",
    });
    let loading = ref(true)
    let query = reactive({dateRange:[],payload:{}, currentPage:1,pageSize:10,total:0})
    onMounted(() => {
        queryWmsWareSku()
    })
    function queryWmsWareSku(){
        query.startTime = query.dateRange[0]
        query.endTime = query.dateRange[1]
        request.post("/api/wmsWareSku/getWmsWareSkuPage", query).then(resp => {
            data.tableData = resp.records
            query.total = resp.total
            loading.value = false
        })
    }

    function reset(){
        query.payload.skuId = ""
        query.payload.wareId = ""
        query.payload.stock = ""
        query.payload.skuName = ""
        query.payload.stockLocked = ""
        query.dateRange=[]
    }

    function addWmsWareSku(){
        transData.openType = "add"
        modWmsWareSku.value.isOpen = true
    }

    function deleteWmsWareSku(id){
        request.get(`/api/wmsWareSku/delete/${id}`).then(resp => {
            queryWmsWareSku()
            ElMessage({message: '删除成功！',openType: 'success'})
        });
    }

    function editWmsWareSku(id){
        transData.id = id
        transData.openType = "edit"
        modWmsWareSku.value.isOpen = true
    }

</script>
<style lang="css">

</style>


